<template>
    <div>
        <Title :title="title"></Title>
        <div ref="Bottom2" style="height: 120px;"></div>
    </div>
</template>
<script>
//2.引入折线图
import { Column } from '@antv/g2plot';
import { get } from '@/utils/request';
export default {
    data() {
        return {
            title: '检测月报',
            
        }
    },
    methods: {
        doubleBrokenLine() {
            const data = [
                {
                    type: '1月',
                    sales: 38,
                },
                {
                    type: '2月',
                    sales: 52,
                },
                {
                    type: '3月',
                    sales: 61,
                },
                {
                    type: '4月',
                    sales: 145,
                },
                {
                    type: '5月',
                    sales: 48,
                },
                {
                    type: '6月',
                    sales: 38,
                },
                {
                    type: '7月',
                    sales: 38,
                },
               
            ];

            const columnPlot = new Column(this.$refs.Bottom2, {
                data,
                xField: 'type',
                yField: 'sales',
                //配置x轴字段
                xAxis: {
                    label: {
                        rotate: -45,
                        style: {
                            fill: "white"
                        }
                    }
                },

                //配置Y轴字段
                yAxis: {
                    label: {

                        style: {
                            fill: "white"
                        }
                    }
                },
                label: {
                    // 可手动配置 label 数据标签位置
                    position: 'middle', // 'top', 'bottom', 'middle',
                    // 配置样式
                    style: {
                        fill: '#FFFFFF',
                        opacity: 0.6,
                    },
                },
                xAxis: {
                    label: {
                        autoHide: true,
                        autoRotate: false,
                    },
                },
                animation: {
                    appear: {
                        animation: 'wave-in',
                        duration: 5000,
                    },
                },
                meta: {
                    type: {
                        alias: '类别',
                    },
                    sales: {
                        alias: '销售额',
                    },
                },
            });

            columnPlot.render();


            },
        //    async getBarData() {
        //     let res = await get('/monitor/queryMouthData');
        //     console.log(res, '获取响应');
        //     if (res && res.data) {
        //         // 假设后端返回的数据在 res.data 中
        //         this.barData = res.data;
        //     }
        // }


        },
         mounted() {
       
            this.doubleBrokenLine();
        }
    }
</script>
<style scoped></style>